<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
		<title>UI Elements</title>
		<style>
			#loader {
				transition: all .3s ease-in-out;
				opacity: 1;
				visibility: visible;
				position: fixed;
				height: 100vh;
				width: 100%;
				background: #fff;
				z-index: 90000
			}
			
			#loader.fadeOut {
				opacity: 0;
				visibility: hidden
			}
			
			.spinner {
				width: 40px;
				height: 40px;
				position: absolute;
				top: calc(50% - 20px);
				left: calc(50% - 20px);
				background-color: #333;
				border-radius: 100%;
				-webkit-animation: sk-scaleout 1s infinite ease-in-out;
				animation: sk-scaleout 1s infinite ease-in-out
			}
			
			@-webkit-keyframes sk-scaleout {
				0% {
					-webkit-transform: scale(0)
				}
				100% {
					-webkit-transform: scale(1);
					opacity: 0
				}
			}
			
			@keyframes sk-scaleout {
				0% {
					-webkit-transform: scale(0);
					transform: scale(0)
				}
				100% {
					-webkit-transform: scale(1);
					transform: scale(1);
					opacity: 0
				}
			}
		</style>
		<link href="/ui/default/default.css" rel="stylesheet">
	</head>

	<body class="app">
		<div id="loader">
			<div class="spinner"></div>
		</div>
		<script>
			window.addEventListener('load', () => {
				const loader = document.getElementById('loader');
				setTimeout(() => {
					loader.classList.add('fadeOut');
				}, 300);
			});
		</script>
		<div>
			<main class="main-content bgc-grey-100">
				<div id="mainContent">
					<div class="row gap-20 masonry pos-r">
						<h4 class="c-grey-900">UI Elements</h4>
						<div class="masonry-sizer col-md-6"></div>
						<div class="masonry-item col-md-6">
							<div class="bgc-white p-20 bd">
								<h6 class="c-grey-900">Alerts</h6>
								<div class="mT-30">
									<div class="alert alert-primary" role="alert">This is a primary alert—check it out!</div>
									<div class="alert alert-secondary" role="alert">This is a secondary alert—check it out!</div>
									<div class="alert alert-success" role="alert">This is a success alert—check it out!</div>
									<div class="alert alert-danger" role="alert">This is a danger alert—check it out!</div>
									<div class="alert alert-warning" role="alert">This is a warning alert—check it out!</div>
									<div class="alert alert-info" role="alert">This is a info alert—check it out!</div>
									<div class="alert alert-light" role="alert">This is a light alert—check it out!</div>
									<div class="alert alert-dark" role="alert">This is a dark alert—check it out!</div>
								</div>
							</div>
						</div>
						<div class="masonry-item col-md-6">
							<div class="bgc-white p-20 bd">
								<h6 class="c-grey-900">Buttons</h6>
								<div class="mT-30">
									<div class="gap-10 peers">
										<div class="peer"><button type="button" class="btn cur-p btn-primary">Primary</button></div>
										<div class="peer"><button type="button" class="btn cur-p btn-secondary">Secondary</button></div>
										<div class="peer"><button type="button" class="btn cur-p btn-success">Success</button></div>
										<div class="peer"><button type="button" class="btn cur-p btn-danger">Danger</button></div>
										<div class="peer"><button type="button" class="btn cur-p btn-warning">Warning</button></div>
										<div class="peer"><button type="button" class="btn cur-p btn-info">Info</button></div>
										<div class="peer"><button type="button" class="btn cur-p btn-light">Light</button></div>
										<div class="peer"><button type="button" class="btn cur-p btn-dark">Dark</button></div>
									</div>
									<div class="w-100 gap-10 peers mY-20">
										<div class="peer"><button type="button" class="btn cur-p btn-outline-primary">Primary</button></div>
										<div class="peer"><button type="button" class="btn cur-p btn-outline-secondary">Secondary</button></div>
										<div class="peer"><button type="button" class="btn cur-p btn-outline-success">Success</button></div>
										<div class="peer"><button type="button" class="btn cur-p btn-outline-danger">Danger</button></div>
										<div class="peer"><button type="button" class="btn cur-p btn-outline-warning">Warning</button></div>
										<div class="peer"><button type="button" class="btn cur-p btn-outline-info">Info</button></div>
										<div class="peer"><button type="button" class="btn cur-p btn-outline-light">Light</button></div>
										<div class="peer"><button type="button" class="btn cur-p btn-outline-dark">Dark</button></div>
									</div>
									<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
										<div class="btn-group mr-2" role="group" aria-label="First group"><button type="button" class="btn btn-success">1</button> <button type="button" class="btn btn-success">2</button> <button type="button" class="btn btn-success">3</button> <button type="button" class="btn btn-success">4</button></div>
										<div class="btn-group mr-2" role="group" aria-label="Second group"><button type="button" class="btn btn-success">5</button> <button type="button" class="btn btn-success">6</button> <button type="button" class="btn btn-success">7</button></div>
										<div class="btn-group" role="group" aria-label="Third group"><button type="button" class="btn btn-success">8</button></div>
									</div>
								</div>
							</div>
						</div>
						<div class="masonry-item col-md-6">
							<div class="bgc-white p-20 bd">
								<h6 class="c-grey-900">Dropdowns</h6>
								<div class="mT-30">
									<div class="dropdown"><button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button</button>
										<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
											<a class="dropdown-item" href="#">Action</a>
											<a class="dropdown-item" href="#">Another action</a>
											<a class="dropdown-item" href="#">Something else here</a>
										</div>
									</div>
									<div class="btn-group mT-20"><button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
										<div class="dropdown-menu">
											<a class="dropdown-item" href="#">Action</a>
											<a class="dropdown-item" href="#">Another action</a>
											<a class="dropdown-item" href="#">Something else here</a>
											<div class="dropdown-divider"></div>
											<a class="dropdown-item" href="#">Separated link</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="masonry-item col-md-6">
							<div class="bgc-white p-20 bd">
								<h6 class="c-grey-900">List Group</h6>
								<div class="mT-30">
									<div class="list-group">
										<a href="#" class="list-group-item list-group-item-action active">Cras justo odio </a>
										<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
										<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
										<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
										<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
									</div>
								</div>
							</div>
						</div>
						<div class="masonry-item col-md-6">
							<div class="bgc-white p-20 bd">
								<h6 class="c-grey-900">Modal</h6>
								<div class="mT-30"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button>
									<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
										<div class="modal-dialog" role="document">
											<div class="modal-content">
												<div class="modal-header">
													<h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>
												<div class="modal-body">...</div>
												<div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="masonry-item col-md-6">
							<div class="bgc-white p-20 bd">
								<h6 class="c-grey-900">Popover</h6>
								<div class="mT-30"><button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button></div>
							</div>
						</div>
						<div class="masonry-item col-md-6">
							<div class="bgc-white p-20 bd">
								<h6 class="c-grey-900">Progress</h6>
								<div class="mT-30">
									<div class="layers">
										<div class="layer w-100">
											<h5 class="mB-5">100k</h5><small class="fw-600 c-grey-700">Visitors From USA</small> <span class="pull-right c-grey-600 fsz-sm">50%</span>
											<div class="progress mT-10">
												<div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"><span class="sr-only">50% Complete</span></div>
											</div>
										</div>
										<div class="layer w-100 mT-15">
											<h5 class="mB-5">1M</h5><small class="fw-600 c-grey-700">Visitors From Europe</small> <span class="pull-right c-grey-600 fsz-sm">80%</span>
											<div class="progress mT-10">
												<div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%"><span class="sr-only">80% Complete</span></div>
											</div>
										</div>
										<div class="layer w-100 mT-15">
											<h5 class="mB-5">450k</h5><small class="fw-600 c-grey-700">Visitors From Australia</small> <span class="pull-right c-grey-600 fsz-sm">40%</span>
											<div class="progress mT-10">
												<div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%"><span class="sr-only">40% Complete</span></div>
											</div>
										</div>
										<div class="layer w-100 mT-15">
											<h5 class="mB-5">1B</h5><small class="fw-600 c-grey-700">Visitors From India</small> <span class="pull-right c-grey-600 fsz-sm">90%</span>
											<div class="progress mT-10">
												<div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%"><span class="sr-only">90% Complete</span></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="masonry-item col-md-6">
							<div class="bgc-white p-20 bd">
								<h6 class="c-grey-900">Tootips</h6>
								<div class="mT-30"><button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> <button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> <button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button></div>
							</div>
						</div>
					</div>
				</div>
			</main>
		</div>
		<script type="text/javascript" src="/ui/js/vendor.js"></script>
		<script type="text/javascript" src="/ui/js/bundle.js"></script>
	</body>

</html>